<template>
  <div class="addDialog">
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="visible" title=""
      :show-close="false" align-center class="dialogAdd">
      <div class="dialog_content">
        <div class="dialog_header">
          <div class="title">
            <img src="@/assets/images/rectangle07.png" alt="">
            <span>{{ props.type_dialog == 'add' ? '新增' : '编辑' }}排班时间</span>
          </div>
          <!-- <img class="close" src="@/assets/images/close.png" @click="handleClose" alt=""> -->
        </div>
        <div class="dialog_details">
          <div class="details">
            <el-form ref="ruleFormRef" class="dialog_form" :model="ruleFormData.ruleForm" :rules="rules">
              <el-form-item label="班组成员" class="user">
                <span>张三</span>
              </el-form-item>
              <el-form-item label="排班日期">
                <el-date-picker v-model="ruleFormData.ruleForm.date" type="dates" placeholder="" />
              </el-form-item>
              <el-form-item label="排班模板">
                <el-select v-model="ruleFormData.ruleForm.template" multiple collapse-tags collapse-tags-tooltip
                  placeholder=" " clearable>
                  <el-option label="早班（13:00~16:30）" :value="1" />
                  <el-option label="中班（13:00~16:30）" :value="2" />
                  <el-option label="晚班（13:00~16:30）" :value="3" />
                </el-select>
              </el-form-item>
              <el-form-item label="排班时间">
                <el-time-picker v-model="ruleFormData.ruleForm.time" is-range range-separator="-" start-placeholder=""
                  end-placeholder="" />
                <div class="btn_item" @click="selectedAdd">
                  <img class="btn_icon" src="@/assets/images/images_new/table_add.png" alt="">
                  <span>新 增</span>
                </div>
              </el-form-item>
              <el-form-item>
                <el-table :data="time_list" border style="width: 100%" stripe empty-text='暂无数据' max-height="258px"
                  :scrollbar-always-on="true">
                  <el-table-column property="time_s" label="排班日期" />
                  <el-table-column label="操作" width="80px" class-name="fixed_column" fixed="right">
                    <template #default="scope: any">
                      <div class="btn_ative" title="删除">
                        <img class="operation_btn" src="@/assets/images/images_new/table_del.png" alt="">
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item class="item_btn">
                <div class="btn">
                  <el-button type="warning" @click="handleConfirm(ruleFormRef)">保 存</el-button>
                  <el-button @click="handleClose">取 消</el-button>
                </div>
              </el-form-item>
            </el-form>

          </div>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useTypeAdd, useTypeEdit } from "@/http/device"
import type { FormInstance, FormRules } from 'element-plus'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  type_dialog: { //add 新增 edit 编辑
    type: String,
    default: ''
  },
  dialogParams: {
    type: Object as any,
    default: {}
  },
  checkItem: {
    type: Object as any,
    default: {}
  }
})
let visible = ref(false);

const treeValue = ref<any[]>([]); //空间分类的值


const ruleFormRef = ref<FormInstance>()

const ruleFormData = reactive({
  ruleForm: {
    id: "",
    isSys: 1,//是否系统定义 0-总平台新增 1-运维平台新增
    name: '',//名称
    date: "",//日期
    template: 0,//模板
    time: '',//时间范围
  } as any
})

let time_list = [
  { time_s: "3:00~6:30" },
  { time_s: "早班（13:00~16:30）" }
]

watch(() => props.dialogVisible, (newValue, oldValue) => {
  visible.value = newValue;
  if (newValue) {
    // console.log('ruleFormData.ruleForm', ruleFormData.ruleForm);
    if (props.type_dialog == 'add') { //新增分类
      // console.log('checkItem', props.checkItem);
      ruleFormData.ruleForm = {
        isSys: 1,
        name: '',
      }
    } else { //编辑分类
      // console.log('dialogParams',props.dialogParams);
      ruleFormData.ruleForm = JSON.parse(JSON.stringify(props.dialogParams));
    }


    setTimeout(() => {
      if (ruleFormRef.value) {
        ruleFormRef.value.clearValidate();
      }
    }, 50);


  }
});

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入使用类型名称', trigger: 'change' }],
})

//emit(父组件中的自定义方法)
const emit = defineEmits(['closeDialog', 'confirmDialog']);
//关闭弹窗
const handleClose = () => {
  emit("closeDialog");
}

//点击保存按钮
const handleConfirm = async (formEl: FormInstance | undefined) => {
  console.log('treeValue', treeValue);

  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (props.type_dialog == 'add') {
        space_Add();
      } else {
        space_edit();
      }
    } else {
      // console.log('error submit!', fields)
    }
  })


}

//新增点击保存
const space_Add = () => {
  useTypeAdd(ruleFormData.ruleForm).then(res => {
    ElMessage({
      message: '操作成功!',
      type: 'success',
    })
    //关闭弹窗且更新列表
    emit('confirmDialog');
  })
}

//编辑点击保存
const space_edit = () => {
  useTypeEdit(ruleFormData.ruleForm).then(res => {
    ElMessage({
      message: '操作成功!',
      type: 'success',
    })
    //关闭弹窗且更新列表
    emit('confirmDialog');
  })
}


//点击清空按钮
const empty = (noEmit: any) => {


}

//新增
const selectedAdd = () => {

}
defineExpose({
  empty
})
</script>

<style scoped lang="scss">
.addDialog {
  :deep(.dialogAdd) {
    width: 540px;
    min-height: 235px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;

    .el-dialog__header {
      padding: 0;

    }

    .el-dialog__body {
      padding: 0;

      .dialog_content {
        .dialog_header {
          padding: 0;
          height: 59px;
          padding: 8px 32px 4px 62px;
          line-height: 52px;
          font-size: 16px;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px dashed rgba(112, 105, 95, 1);

          .title {
            display: flex;
            align-items: center;

            img {
              width: 4px;
              height: 22px;
              margin-right: 15px;
            }

          }

          .close {
            width: 25px;
            height: 25px;
            cursor: pointer;

          }
        }

        .dialog_details {
          padding: 25px 42px 0 42px;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 30px;
          color: rgba(0, 0, 0, 1);

          .details {
            padding: 0 0 30px 0px;
            align-items: center;

            // &.details2 {
            //     padding: 0 14px 25px 14px;
            // }
            .btn_item {
              display: flex;
              align-items: center;
              cursor: pointer;
              height: 32px;
              line-height: 32px;
              padding: 0 9px;
              color: rgb(192, 164, 91);
              margin-left: 20px;

              &:hover {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 2px;
              }

              .btn_icon {
                width: 18px;
                margin-right: 6px;
              }
            }

            .btn_ative {
              width: 35px;
              height: 35px;
              line-height: 35px;
              cursor: pointer;
              display: inline-block;
              margin-right: 10px;
              text-align: center;
              margin-top: 4px;
              padding-top: 5px;

              &:last-child {
                margin-right: 0;
              }

              &:hover {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 2px;
              }

              .operation_btn {
                height: 20px;

              }
            }

            .el-input-group--append {
              .el-input__wrapper {
                border-right: 0;
              }

              .el-input-group__append {
                background-color: #fff;
                padding: 0 5px;
                border-radius: 0;
              }
            }

          }

        }

      }
    }


  }

}

.dialog_form {
  display: block;

  :deep(.el-form-item) {
    margin-bottom: 22px;

    &.item_btn {
      padding-top: 25px;
    }

    &.is-required {
      .el-form-item__label::before {
        color: red;
        margin-top: 3px;
      }
    }

    .el-form-item__label {
      width: 95px;
      padding-right: 30px;
    }

    &.user {
      .el-form-item__label {
        color: #70695f;
      }
    }
  }

  .btn {
    width: 100%;
    text-align: right;
    padding-right: 35px;
  }
}
</style>